<script setup lang="ts">
const defineEmits = defineEmits(['radioChange'])

const radioValue = ref(false)
const radioSwitch = ()=>{
	radioValue.value = !radioValue.value
	defineEmits('radioChange', radioValue.value)
}
</script>

<template>
	<div class="radio">
		<div class="radio-box" :class="{active: radioValue}" @click="radioSwitch">
			<span class="round"></span>
		</div>
		<span class="label"><slot>专业服务</slot></span>
	</div>
</template>

<style scoped lang="scss">
.radio{
	display: flex;
	align-items: center;
	.radio-box{
		width: 48px;
		height: 24px;
		border-radius: 100px;
		background: #E5E7EB;
		padding: 0 3px;
		box-sizing: border-box;
		position: relative;
		transition: background .1s;
		cursor: pointer;
		&.active{
			background: #1DBF73;
			.round{
				position: absolute;
				top: 3px;
				left: 27px;
			}
		}
		.round{
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #fff;
			box-shadow: 0 1px 4px 0 rgba(25,30,40,0.04);
			border-radius: 100%;
			position: absolute;
			top: 3px;
			left: 3px;
			transition: left .3s;
		}
	}
	.label{
		padding-left: 8px;
		color: #191E28;
	}
}
</style>